<template>
  <el-dialog title="客户详情" :visible.sync="detailDialogVisible"
             top="0%" custom-class='dialog_right  dialogScroll_detail MkStoreCustomerDetail'
             @open="openDialog" @close="closeDialog">
    <div class="operationBtnInRightDialog">
      <span class='infoIcon'  @click="openEditForm"><i class="el-icon-edit"></i> 编辑</span>
    </div>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 110)+'px'}]">
      <div class="contentDiv">
        <div class="detail-box">
          <h5>基本信息</h5>
          <div class="detail-list-box">
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">客户类型</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.sellerType | sellerType }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">客户名称</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.name }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">店铺名称</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.shopName }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">票据抬头</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.billHeader }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">社会信用代码</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.creditCode }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">联系人</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.contact }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">联系电话</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.contactPhone }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">所在城市</el-col>
              <el-col :span="18">{{ sellerDetail.essentialInfo.cityName }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="6">服务站点</el-col>
              <el-col :span="18">
                <span v-for="(item, index) in sellerDetail.essentialInfo.siteInfo">
                  {{ item.name }}
                  <span v-if="index != sellerDetail.essentialInfo.siteInfo.length - 1">、</span>
                </span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="detail-box">
          <h5>管理员信息</h5>
          <div class="detail-list-box">
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">姓名</el-col>
              <el-col :span="20">{{ sellerDetail.adminInfo.adminName }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">身份证号</el-col>
              <el-col :span="20">{{ sellerDetail.adminInfo.adminIdCard }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">联系电话</el-col>
              <el-col :span="20">{{ sellerDetail.adminInfo.adminPhone }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">支付Key</el-col>
              <el-col :span="20">{{ sellerDetail.adminInfo.payKey }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">支付密钥</el-col>
              <el-col :span="20">{{ sellerDetail.adminInfo.paySecret }}</el-col>
            </el-row>
          </div>
        </div>

        <div class="detail-box">
          <h5>转账信息</h5>
          <div class="detail-list-box">
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">公司名称</el-col>
              <el-col :span="20">{{ sellerDetail.bankInfo.company }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">银行卡号</el-col>
              <el-col :span="20">{{ sellerDetail.bankInfo.bankCardNumber }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">交易银行</el-col>
              <el-col :span="20">{{ sellerDetail.bankInfo.tradingBank }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">所在地</el-col>
              <el-col :span="20">{{ sellerDetail.bankInfo.bankAddress }}</el-col>
            </el-row>
            <el-row :gutter="20" class="detail-item">
              <el-col :span="4">开户支行</el-col>
              <el-col :span="20">{{ sellerDetail.bankInfo.openBankBranch }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
  import customerService from '../../../services/customer'
  import {mapState} from 'vuex'
  export default {
    name: 'MkStoreCustomerDetail',

    props: ['dialogVisible', 'sellerId'],
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight
    }),
    watch: {
      dialogVisible: function (value) {
        this.detailDialogVisible = value;
      }
    },

    filters:{
      sellerType(value) {
        switch (value) {
          case 'SELFSTORE': return '自营店铺';
          case 'THREESTORE': return '三方店铺';
        }
      }
    },

    methods: {
      openDialog () {
        customerService.loadSellerDetailServer({
          'id': this.sellerId
        }, (data) => {
          this.sellerDetail = data.data;
        })
      },

      openEditForm () {
        this.$emit('openEditForm', this.sellerDetail);
      },

      closeDialog () {
        this.$emit('closeDialog');
      }
    },

    data () {
      return {
        detailDialogVisible: false,
        sellerDetail: {
          adminInfo: {},
          bankInfo: {},
          essentialInfo: {}
        },
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .MkStoreCustomerDetail {
    .detail-box {
      h5 {
        font-size: 18px;
        color: @fontColorOne;
        font-weight: normal;
      }
      .detail-list-box {
        margin: 20px 0 40px 0;
        padding: 30px;
        background-color: #F9FAFA;
      }
      .el-row {
        line-height: 40px;
      }
      .el-col-4, .el-col-6 {
        color: @fontColorThree;
        text-align: right;
      }
    }
    .detail-item {
      .el-col:nth-child(2) {
        word-break: break-all;
      }
    }
  }
</style>
